<!DOCTYPE html>
<html lang="en"
	  xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>购物系统-首页</title>

	<link th:href="@{webjars/bootstrap/5.1.3/css/bootstrap.min.css}" rel="stylesheet">
	<link th:href="@{css/ms-home.css}" rel="stylesheet">

</head>
<body>

<nav th:replace="common/topbar::flag(topbar='home')"></nav>

<nav th:replace="common/ms-toast.html"></nav>

<nav th:replace="product/cart.html"></nav>
<div class="container-fluid">
	<div class="row mb-3 mt-3">
		<div class="col-md-3">
			<img class="float-end" src="https://uni1024.oss-cn-hangzhou.aliyuncs.com/mall-system/public/logo.png" width="200px" height="100px">
		</div>
		<div class="col-md-7">
		<nav class="ms-nav-search">
			<input type="text">
			<button	onclick="search(this)"
					class="btn btn-primary">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
					<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
				</svg>
				搜索
			</button>

			<ul class="list-unstyled list-group list-group-horizontal">
				<li class="list-group-item">推荐搜索: </li>
				<li class="list-group-item">电脑 </li>
				<li class="list-group-item">手机</li>
			</ul>
		</nav>
		</div>
		<div class="col-md-2 align-content-end">
			<button class="btn btn-outline-success" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16">
					<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
				</svg>
				购物车
			</button>
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row">
		<div class="col-md-10 push-1 pull-1">

			<div class="row">
				<div class="col-md-3 placeholder-wave">
					<div class="container-fluid ">
						<ul class="list-unstyled shadow px-4 mb-3">
							<!--零食、饮料、水果、蔬菜-->
							<li>
								<div class="row">
									<div class="col-md-12">
										<nav>
											<ol class="breadcrumb">
												<li class="breadcrumb-item active">
													<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-apple" viewBox="0 0 16 16">
														<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282z"/>
														<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282z"/>
													</svg>
												</li>
												<li class="breadcrumb-item active placeholder">
													<a href="#">零食</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">饮料</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">水果</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">蔬菜</a>
												</li>

											</ol>
										</nav>
									</div>
								</div>
							</li>
							<!--手机、运营商、数码-->
							<li>
								<div class="row">
									<div class="col-md-12">
										<nav>
											<ol class="breadcrumb">
												<li class="breadcrumb-item">
													<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera" viewBox="0 0 16 16">
														<path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/>
														<path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
													</svg>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">手机</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">运营商</a>
												</li>
												<li class="breadcrumb-item active placeholder">
													数码
												</li>
											</ol>
										</nav>
									</div>
								</div>
							</li>
							<!-- 电脑、办公 -->
							<li>
								<div class="row">
									<div class="col-md-12">
										<nav>
											<ol class="breadcrumb">
												<li class="breadcrumb-item active">
													<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pc-display-horizontal" viewBox="0 0 16 16">
														<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v7A1.5 1.5 0 0 0 1.5 10H6v1H1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-5v-1h4.5A1.5 1.5 0 0 0 16 8.5v-7A1.5 1.5 0 0 0 14.5 0h-13Zm0 1h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5ZM12 12.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0ZM1.5 12h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1ZM1 14.25a.25.25 0 0 1 .25-.25h5.5a.25.25 0 1 1 0 .5h-5.5a.25.25 0 0 1-.25-.25Z"/>
													</svg>
												</li>
												<li class="breadcrumb-item active placeholder">
													<a href="#">电脑</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">办公</a>
												</li>
											</ol>
										</nav>
									</div>
								</div>
							</li>
							<!-- 家具、家居、家装、厨具 -->
							<li>
								<div class="row">
									<div class="col-md-12">
										<nav>
											<ol class="breadcrumb">
												<li class="breadcrumb-item active">
													<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-easel" viewBox="0 0 16 16">
														<path d="M8 0a.5.5 0 0 1 .473.337L9.046 2H14a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1.85l1.323 3.837a.5.5 0 1 1-.946.326L11.092 11H8.5v3a.5.5 0 0 1-1 0v-3H4.908l-1.435 4.163a.5.5 0 1 1-.946-.326L3.85 11H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h4.954L7.527.337A.5.5 0 0 1 8 0zM2 3v7h12V3H2z"/>
													</svg>
												</li>
												<li class="breadcrumb-item active placeholder">
													<a href="#">家具</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">家居</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">家装</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">厨具</a>
												</li>
											</ol>
										</nav>
									</div>
								</div>
							</li>

							<!-- 男装、女装、童装、内衣 -->
							<li>
								<div class="row">
									<div class="col-md-12">
										<nav>
											<ol class="breadcrumb">
												<li class="breadcrumb-item active">
													<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
														<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
														<path fill-rule="evenodd" d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"/>
														<path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
													</svg>
												</li>
												<li class="breadcrumb-item active placeholder">
													<a href="#">男装</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">女装</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">童装</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">内衣</a>
												</li>
											</ol>
										</nav>
									</div>
								</div>
							</li>

							<!-- 图书、文娱、教育、电子书-->
							<li>
								<div class="row">
									<div class="col-md-12">
										<nav>
											<ol class="breadcrumb">
												<li class="breadcrumb-item active">
													<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book-half" viewBox="0 0 16 16">
														<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
													</svg>
												</li>
												<li class="breadcrumb-item active placeholder">
													<a href="#">图书</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">文娱</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">教育</a>
												</li>
												<li class="breadcrumb-item placeholder">
													<a href="#">电子书</a>
												</li>
											</ol>
										</nav>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-7">
					<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
						<div class="carousel-indicators">
							<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
							<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
							<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
						</div>
						<div class="carousel-inner placeholder-wave">
							<div class="carousel-item active">
								<img src="https://uni1024.oss-cn-hangzhou.aliyuncs.com/mall-system/images-product/test/1.jpg" class="d-block w-100 ms-img-carousel" alt="...">
								<div class="carousel-caption d-none d-md-block">
									<h5>促销活动1</h5>
									<p>原价100元的商品，现价8折出售！先到先得~</p>
								</div>
							</div>
							<div class="carousel-item">
								<img src="https://uni1024.oss-cn-hangzhou.aliyuncs.com/mall-system/images-product/test/2.jpg" class="d-block w-100 ms-img-carousel" alt="...">
								<div class="carousel-caption d-none d-md-block">
									<h5>促销活动2</h5>
									<p>买一送一</p>
								</div>
							</div>
							<div class="carousel-item">
								<img src="https://uni1024.oss-cn-hangzhou.aliyuncs.com/mall-system/images-product/test/3.jpg" class="d-block w-100 ms-img-carousel" alt="...">
								<div class="carousel-caption d-none d-md-block">
									<h5>促销活动3</h5>
									<p>打9折，买2送1</p>
								</div>
							</div>
						</div>
						<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
							<span class="carousel-control-prev-icon" aria-hidden="true"></span>
							<span class="visually-hidden">Previous</span>
						</button>
						<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
							<span class="carousel-control-next-icon" aria-hidden="true"></span>
							<span class="visually-hidden">Next</span>
						</button>
					</div>

				</div>

				<div class="col-md-2">
					<div class="card text-center shadow" style="width: 18rem;">
						<!-- 未登录时 -->
						<th:block th:if="${session.loginUser == null}">
							<img class="card-img-top mx-auto mt-5 placeholder-wave shadow ms-img-head"
								 src="https://uni1024.oss-cn-hangzhou.aliyuncs.com/mall-system/public/%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F.png">
							<div class="card-body">
								<p class="card-text placeholder">[游客] 路人甲</p>
							</div>
							<nav class="mb-3 mt-3">
								<button type="button" class="btn btn-warning btn-md w-25 mr-3 placeholder" onclick="location='/register.html'">
									注册
								</button>
								<button type="button" class="btn btn-success btn-md w-25  ml-3 placeholder" onclick="location='/login.html'">
									登录
								</button>
								<button type="button" class="btn btn-primary btn-md w-25 placeholder" onclick="location='/retrieve.html'">
									找回
								</button>
							</nav>

						</th:block>

						<!-- 已登录时 -->
						<th:block th:if="${session.loginUser != null}">
							<img class="card-img-top mx-auto mt-5 placeholder-wave shadow ms-img-head" th:src="${session.loginUser.getImg()}">
							<div class="card-body">
								<p class="card-text placeholder" th:text="
							'【' + ${session.loginUser.getRole().getName()} + '】' +
							${session.loginUser.getUsername()}"></p>
							</div>
							<nav class="mb-3 mt-3">
								<button type="button" class="btn btn-primary btn-md mr-3 placeholder" onclick="location='/user-center.html?type=base'" style="width: 40%">
									<a>个人中心</a>
								</button>

								<button type="button" class="btn btn-warning btn-md mr-3 placeholder" onclick="ms_show_toast(true, '功能待开发')" style="width: 40%">
									查看购物车
								</button>
							</nav>
						</th:block>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script th:src="@{webjars/jquery/3.3.1/jquery.js}" type="text/javascript"></script>
<script th:src="@{webjars/bootstrap/5.1.3/js/bootstrap.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-config.js}" type="text/javascript"></script>
<script th:src="@{/js/utils/ms-util-param.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-toast.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-topbar.js}" type="text/javascript"></script>
<!--<script th:src="@{/js/common/ms-index.js}" type="text/javascript"></script>-->
<script type="text/javascript">
	function search(btn){
		location.href = '/index.html?name=' + $(btn).prev('input').val()
	}
</script>
</body>

</html>